<template>
  <div class="ly-customer">
    <div class="ly-table">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column fixed prop="id" label="序号" width="100"></el-table-column>
        <el-table-column prop="mobile" label="客户账号" width="150"></el-table-column>
        <el-table-column prop="companyName" label="公司名称" width="220"></el-table-column>
        <el-table-column prop="linkman" label="联系人" width="100"></el-table-column>
        <el-table-column prop="email" label="联系邮箱"></el-table-column>
        <el-table-column prop="qq" label="QQ" width="100"></el-table-column>
        <el-table-column prop="counselor" label="专属顾问" width="220"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <span class="ly-btn" @click="addCounselor(scope.row)">编辑</span>
            <span class="ly-btn" @click="addBill(scope.row)">上传账单</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="150px"
        style="width: 600px; margin-left:50px;"
      >
        <el-form-item label="专属顾问:" prop="counselor" size="small">
          <el-input v-model="temp.counselor" placeholder maxlength="20" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small" class="button">取消</el-button>
        <el-button type="primary" @click="updateData" size="small" class="button">确认</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="dialogFormVisiblebill">
      <el-form
        ref="dataForm"
        :model="bill"
        label-position="left"
        label-width="150px"
        style="width: 600px; margin-left:50px;"
      >
        <!-- <el-form-item label="客户:" size="small">
          <el-select v-model="bill.userId" filterable placeholder="请选择" @change="setbill">
            <el-option v-for="item in options" :key="item.id" :label="item.mobile" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="账单:" size="small">
          <el-upload
            class="upload-demo"
            :action="action"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblebill = false" size="small" class="button">取消</el-button>
        <el-button type="primary" @click="submit" size="small" class="button">确认</el-button>
      </div>
    </el-dialog>
    <!--    分页暂时不做-->
    <listPage
      :pageData="pageList"
      v-if="pageList.totalRecNum >  pageList.pageSize"
      @getdata="setPageNo"
    ></listPage>
  </div>
</template>

<script>
import config from '@/config'
import { findAll, update } from "@/api/user";
import {billAdd} from "@/api/bill"
import _ from "lodash";
export default {
  name: "customer",
  data() {
    return {
         bill:{
          mobile:'',
          billName:'',
          billUrl:'',
          userId:''
        },
      fileList: [],
       action: config.baseURL + '/upload/uploadBill',
      dialogFormVisiblebill:false,
      pageList: {
        page: 1, //当前页
        totalRecNum: 0, //总页数
        pageSize: 25 // 分页条数
      }, // 分页
      maxHeight: 500,
      tableData: [],
      temp: "",
      dialogFormVisible: false,
      user: {
        id: "",
        counselor: ""
      }
    };
  },
  methods: {
    //更新用户
    updateData() {
      const data = _.omit(this.temp);
      this.user.id = data.id;
      this.user.counselor = data.counselor;
      update(this.user).then(response => {
        let result = response.data;
        if (result.code === "0000") {
          this.$message.success(result.msg);
        } else {
          this.$message.error(result.msg);
        }
        this.findAllUser();
      });
      this.dialogFormVisible = false;
    },
    addCounselor(data) {
      this.temp = data;
      this.dialogFormVisible = true;
    },
    // 所有用户信息
    findAllUser() {
      findAll().then(response => {
        let result = response.data;
        if (result.code === "0000") {
          this.tableData = result.data;
        }
      });
    },
    addBill(item) {
   
      this.fileList = []
      this.bill.userId = item.id
       this.bill.mobile =  item.mobile
      this.dialogFormVisiblebill = true;
      

    },
     handleAvatarSuccess(res, file) {
        this.bill.billName = res.data.billName
        this.bill.billUrl = res.data.billUrl
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 10MB!')
        }
        return isLt2M;
      },
      submit() {
        let data = {}
        data = {
          billUrl: this.bill.billUrl,
          billName: this.bill.billName,
          userId: this.bill.userId,
          mobile: this.bill.mobile
        }
        if (data.billUrl) {
          billAdd(data).then(response => {
            let result = response.data
            if (result.code === '0000') {
              this.$message.success(result.msg)
              this.bill.billName = ''
              this.bill.billUrl = ''
              this.bill.userId =''
              this.bill.mobile = ''
              this.dialogFormVisiblebill = false
              this.findAllUser()
            } else {
              this.$message.error(result.msg)
            }
          })
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
  },
  created() {
    this.findAllUser();
  }
};
</script>

<style scoped>
</style>